/**
 *  文件导出按钮组件,目前支持excel
 *
 *  依赖项:
 *  <script src="/plugins/sheetJs/xlsx.core.min.js"></script>
    <script src="/plugins/sheetJs/filesaver.min.js"></script>
    <script src="/plugins/react/layui/layui.js"></script>
    <script src="/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="/js/core/utils.min.js" type="text/javascript"></script>
    <script src="/js/core/helper.min.js" type="text/javascript" ></script>
    <script src="/plugins/react/react.min.js"></script>
    <script src="/plugins/react/react-dom.min.js"></script>
    <script src="/js/core/building_utils.min.js?v=70"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    属性props:
    children : 按钮名称通过标签内容提供
    onClick : 按钮回调,但是回调方法并不处理导出业务,必须在回调用中户自己调用exportExcel方法
              需要实现一个dataTrans接口，将传入的数据转成插件需要的数组
    exportFileName : 导出的文件名
 */

class FileExportButton extends React.Component {

    constructor(props){
        if(props.children instanceof String){
            console.error("按钮名称格式不对!")
            return;
        }
        super(props);
    }

    /**
     * string转byte数组
     * @param s
     * @returns {ArrayBuffer}
     */
    s2ab(s/*:string*/)/*:ArrayBuffer*/ {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

    /**
     * 由插件使用者手动调用
     * @param url 服务端数据请求url
     * @param params  url参数
     * @param dataTrans 数据转换接口，因为XLSX需要的是一个二维数组，每一个数组代表一行数据，所以需要转换
     */
    exportExcel(url,params,dataTrans){
        postJson(url,$.param(params),(data)=>{
            const ws = XLSX.utils.aoa_to_sheet(dataTrans(data.data));
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
            const wbout = XLSX.write(wb, {type: "binary", bookType: "xlsx"});
            saveAs(new Blob([this.s2ab(wbout)], {type: "application/octet-stream"}), this.props.exportFileName+".xlsx");
        })
    }

    onClick(){
        if(this.props.onClick)
            this.props.onClick();
    }

    render(){
        return (
            <div className="pull-left">
                <button className="layui-btn layui-btn-normal layui-btn-small layui-btn-sm" type="button" onClick={()=>this.onClick()}>
                    {this.props.children}
                </button>
            </div>
        )
    }
}

